<template>
	<view class="classLayout">
			<custom-nav-bar title="分类"></custom-nav-bar>
		<view class="classify">
			<theme-item v-for="item in classList" :key="item._id" :imageInfo="item" @tap.native="handleToClassList(item)"></theme-item>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { onReachBottom } from '@dcloudio/uni-app';
	import { apiGetClassiFy } from '@/api/home/index.js'
	const pageParams = reactive({
		pageNum: 1,
		pageSize: 20,
	})
	const isLoadingMore = ref(true)
	let classList = ref([])
	
	onReachBottom(() => {
		if(!isLoadingMore.value) return 
		pageParams.pageNum ++
		getClassiFy()
	})
	// 获取首页壁纸分类
	const getClassiFy = async () => {
		const {
			data
		} = await apiGetClassiFy(pageParams)
		if(!data.length) isLoadingMore.value = false
		classList.value.push(...data)
	}
	const handleToClassList = item => {
		uni.navigateTo({
			url:'/pages/classList/classList?classid=' +item._id + '&name=' + item.name ,
		})
	}
	
	getClassiFy()
</script>

<style lang="scss" scoped>
.classify {
	padding: 30rpx;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 15rpx;
}
</style>
